<!--
 * @Description: 下发任务弹窗
 * @Author: Caroline
 * @Date: 2024-01-16 20:06:43
 * @LastEditTime: 2024-03-09 23:41:20
 * @LastEditors: Caroline
 * @FilePath: \Evaluation-web\src\views\task\detail\components\transmitTaskDialog.vue
-->
<template>
  <el-dialog v-model="visible" width="760px" title="任务转交" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" class="data-form" :rules="rules" :inline="true" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <!-- 测评时间 -->
      <el-form-item prop="evaluateTimeList" label="测评时间">
        <el-date-picker ref="datesRef" type="dates" v-model="dataForm.evaluateTimeList" :editable="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="$t('task.evaluateTime')"></el-date-picker>
      </el-form-item>

      <!-- 测评人员 -->
      <el-form-item prop="evaluator" label="测评人员">
        <el-select v-model="dataForm.evaluator" value-key="id" placeholder="测评人员">
          <el-option v-for="item in evaluatorList" :key="item.id" :label="item.name" :value="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 1、点位表格区 -->
    <!-- 1.1、点位搜索 -->
    <el-form class="search-form" :model="state.dataForm" :inline="true">
      <!-- 点位名称 -->
      <el-form-item prop="pointName" label="点位名称">
        <el-input v-model="state.dataForm.pointName" placeholder="点位名称"></el-input>
      </el-form-item>

      <!-- 区域 -->
      <el-form-item label="区域">
        <el-cascader v-model="state.dataForm.fullAreaId" placeholder="区域" filterable clearable :props="{ label: 'departName', value: 'id' }" :options="areaList" />
      </el-form-item>

      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>

      <!-- 重置 -->
      <el-form-item>
        <el-button type="info" plain @click="onReset">{{ $t("reset") }}</el-button>
      </el-form-item>
    </el-form>
    <!--1.2、点位表格 -->
    <el-table max-height="500px" v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
      <!-- 2.1、表格列 -->
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="pointName" label="点位名称" header-align="center" align="center" min-width="90" />
      <el-table-column prop="area" label="区域" header-align="center" align="center" min-width="90" />
      <el-table-column prop="pointType" label="点位类别" header-align="center" align="center" min-width="90" />
      <el-table-column prop="lng" label="经度" header-align="center" align="center" min-width="90" />
      <el-table-column prop="lat" label="维度" header-align="center" align="center" min-width="90" />
    </el-table>

    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>

    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">转交</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import { ElMessage, UploadProps } from "element-plus";
import { useI18n } from "vue-i18n";
import baseService from "@/service/baseService";
import { formatDate } from "@/utils/date";
import useView from "@/hooks/useView";

const { t } = useI18n();

const emit = defineEmits(["refreshDataList"]);
const visible = ref(false);

const view = reactive({
  getDataListURL: "/if/daily/patrol/page",
  getDataListIsPage: true,
  dataForm: {
    pointName: "",
    fullAreaId: ""
  }
});
const state = reactive({ ...useView(view), ...toRefs(view) });
const onReset = () => {
  state.dataForm.pointName = "";
  state.dataForm.fullAreaId = "";
};

const dataFormRef = ref();

type FormDataType = {
  pointIdList: { id: string }[];
  evaluator: { id: string; name: string };
  evaluateTimeList: string[];
};
const dataForm = ref<FormDataType>({
  pointIdList: [],
  evaluator: { id: "", name: "" },
  evaluateTimeList: []
});

// 区域集合
const areaList = ref<{ id: string; name: string }[]>([]);
const getAreaList = () => {
  baseService.get("/sys/region/region").then((res) => {
    areaList.value = res.data || [];
  });
};
getAreaList();

// 测评人员集合
const evaluatorList = ref<{ id: string; name: string }[]>([]);
const getEvaluatorList = () => {
  baseService.get("/assess/user/page",{limit:1000}).then((res) => {
    evaluatorList.value = res.data || [];
  });
};
getEvaluatorList();

// 初始化
const init = (row: any) => {
  visible.value = true;

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }
  const { evaluatorId = "", evaluatorName = "", pointIdList = [], evaluateTimeList = [] } = row;
  dataForm.value = {
    pointIdList,
    evaluator: { id: evaluatorId, name: evaluatorName },
    evaluateTimeList
  };
};

// 表单rules
const rules = ref({
  distributeType: [{ required: true, message: t("validate.required"), trigger: ["blur", "change"] }],
  moniotorId: [{ required: true, message: t("validate.required"), trigger: ["blur", "change"] }]
});

// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    const params = dataForm.value;
    baseService.post("/if/daily/patrol", params).then((res) => {
      ElMessage.success({
        message: t("prompt.success"),
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};

defineExpose({
  init
});
</script>
<style lang="less" scoped>
.title {
  line-height: var(--el-dialog-font-line-height);
  font-size: var(--el-dialog-title-font-size);
  color: var(--el-text-color-primary);
}
:deep(.el-form-item) {
  width: 100%;
}
.search-form {
  .el-form-item {
    width: auto;
  }
}
.data-form {
  margin-top: 30px;
  .tip {
    color: #00000073;
  }
}
</style>
